<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MES制造执行系统 - 菜单</title>
    <link href="//unpkg.com/layui@2.11.5/dist/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            margin: 0;
            padding: 0;
            background: #f5f5f5;
        }
        
        .top-header {
            background: linear-gradient(135deg, #1e88e5, #1565c0);
            color: white;
            padding: 15px 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .system-title {
            font-size: 20px;
            font-weight: bold;
        }
        
        .main-layout {
            display: flex;
            height: 100vh;
        }
        
        .sidebar {
            width: 280px;
            background: white;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
            overflow-y: auto;
        }
        
        .sidebar-header {
            background: #f8f9fa;
            padding: 20px;
            border-bottom: 1px solid #dee2e6;
            font-weight: bold;
            color: #333;
        }
        
        .menu-container {
            padding: 10px 0;
        }
        
        .menu-item {
            list-style: none;
            margin: 0;
        }
        
        .menu-item > a {
            display: block;
            padding: 15px 20px;
            color: #333;
            text-decoration: none;
            border-left: 4px solid transparent;
            transition: all 0.3s;
        }
        
        .menu-item > a:hover {
            background: #e3f2fd;
            color: #1e88e5;
            border-left-color: #1e88e5;
        }
        
        .menu-item.expanded > a {
            background: #e3f2fd;
            color: #1e88e5;
            border-left-color: #1e88e5;
        }
        
        .submenu {
            background: #f8f9fa;
            display: none;
            border-left: 2px solid #e9ecef;
        }
        
        .menu-item.expanded .submenu {
            display: block;
        }
        
        .submenu a {
            display: block;
            padding: 12px 20px 12px 50px;
            color: #666;
            text-decoration: none;
            transition: all 0.3s;
        }
        
        .submenu a:hover {
            background: #e3f2fd;
            color: #1e88e5;
        }
        
        .submenu a.active {
            background: #e3f2fd;
            color: #1e88e5;
            border-left: 3px solid #1e88e5;
        }
        
        .content-area {
            flex: 1;
            background: white;
            margin: 16px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
        }
        
        .content-header {
            background: #f8f9fa;
            padding: 20px;
            border-bottom: 1px solid #dee2e6;
        }
        
        .breadcrumb {
            color: #666;
            font-size: 16px;
        }
        
        .content-body {
            flex: 1;
            padding: 20px;
        }
        
        #contentFrame {
            width: 100%;
            height: 100%;
            border: none;
            background: white;
        }
    </style>
</head>
<body>

    
    <div class="main-layout">
        <div class="sidebar">
            <div class="sidebar-header">
                <i class="fas fa-cogs"></i> 功能导航
            </div>
            
            <div class="menu-container">
                <ul>
                    <!-- 工序管理菜单 -->
                    <li class="menu-item expanded">
                        <a href="javascript:;" onclick="toggleMenu(this)">
                            <i class="fas fa-cogs"></i> 工序管理
                        </a>
                        <div class="submenu">
                            <a href="javascript:void(0);" data-url="/Process/ProcessType" data-title="工序分类管理" onclick="loadContent(this)">
                                <i class="fas fa-tags"></i> 工序分类管理
                            </a>
                            <a href="javascript:void(0);" data-url="/Process/Process" data-title="工序管理" onclick="loadContent(this)">
                                <i class="fas fa-list"></i> 工序管理
                            </a>
                            <a href="javascript:void(0);" data-url="/Process/Technology" data-title="工艺管理" onclick="loadContent(this)">
                                <i class="fas fa-project-diagram"></i> 工艺管理
                            </a>
                            <a href="javascript:void(0);" data-url="/Process/BOMList" data-title="BOM管理" onclick="loadContent(this)">
                                <i class="fas fa-boxes"></i> BOM管理
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        
        <div class="content-area">
            <div class="content-header">
                <div class="breadcrumb" id="breadcrumb">
                    <i class="fas fa-home"></i> 菜单页 > 工序管理 > 工序分类管理
                </div>
            </div>
            <div class="content-body">
                <iframe id="contentFrame" src="/Process/ProcessType?embed=1"></iframe>
            </div>
        </div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        function toggleMenu(element) {
            var menuItem = element.parentElement;
            var isExpanded = menuItem.classList.contains('expanded');
            
            // 切换当前菜单的展开状态
            if (isExpanded) {
                menuItem.classList.remove('expanded');
            } else {
                menuItem.classList.add('expanded');
            }
        }
        
        function loadContent(element) {
            // 阻止默认行为，防止页面跳转
            event.preventDefault();
            event.stopPropagation();
            
            var url = element.getAttribute('data-url');
            var title = element.getAttribute('data-title');
            
            console.log('loadContent被调用，URL:', url, 'Title:', title);
            
            if (!url) {
                console.log('URL为空，退出函数');
                return false;
            }
            
            // 更新面包屑
            var breadcrumbText = '<i class="fas fa-home"></i> 菜单页 > 工序管理 > ' + title;
            document.getElementById('breadcrumb').innerHTML = breadcrumbText;
            console.log('面包屑已更新:', breadcrumbText);
            
            // 更新iframe内容
            var iframe = document.getElementById('contentFrame');
            var fullUrl = url + (url.indexOf('?') > -1 ? '&embed=1' : '?embed=1');
            iframe.src = fullUrl;
            console.log('iframe src已更新:', fullUrl);
            
            // 更新菜单状态
            document.querySelectorAll('.submenu a').forEach(function(a) {
                a.classList.remove('active');
            });
            element.classList.add('active');
            console.log('菜单状态已更新，当前选中:', title);
            
            return false; // 阻止默认行为
        }
        
        // 页面加载完成后的初始化
        $(document).ready(function() {
            console.log('MES制造执行系统已加载完成');
            
            // 默认选中第一个子菜单
            $('.submenu a:first').addClass('active');
            
            // 检查菜单项数量
            var menuItems = $('.menu-item');
            console.log('菜单项总数:', menuItems.length);
            menuItems.each(function(index) {
                var text = $(this).find('> a').text().trim();
                console.log('菜单项', index + 1, ':', text);
            });
            
            // 检查子菜单项数量
            var submenuItems = $('.submenu a');
            console.log('子菜单项总数:', submenuItems.length);
            submenuItems.each(function(index) {
                var text = $(this).text().trim();
                console.log('子菜单项', index + 1, ':', text);
            });
            
            // 为所有子菜单项添加点击事件监听
            $('.submenu a').on('click', function(e) {
                console.log('子菜单项被点击:', $(this).text().trim());
                loadContent(this);
                e.preventDefault();
                e.stopPropagation();
                return false;
            });
        });
        
        // 监听iframe加载完成事件
        document.getElementById('contentFrame').addEventListener('load', function() {
            console.log('iframe内容加载完成');
        });
        
        // 监听来自iframe的消息
        window.addEventListener('message', function(event) {
            console.log('收到iframe消息:', event.data);
            
            if (event.data.action === 'loadBOMAdd') {
                // 加载新增BOM页面
                var url = event.data.url;
                var title = event.data.title;
                
                // 更新面包屑
                var breadcrumbText = '<i class="fas fa-home"></i> 菜单页 > 工序管理 > ' + title;
                document.getElementById('breadcrumb').innerHTML = breadcrumbText;
                
                // 更新iframe内容
                var iframe = document.getElementById('contentFrame');
                var fullUrl = url + (url.indexOf('?') > -1 ? '&embed=1' : '?embed=1');
                iframe.src = fullUrl;
                
                console.log('已跳转到新增BOM页面:', fullUrl);
            } else if (event.data.action === 'returnToList') {
                // 返回BOM列表页面
                var url = '/Process/BOMList';
                var title = 'BOM管理';
                
                // 更新面包屑
                var breadcrumbText = '<i class="fas fa-home"></i> 菜单页 > 工序管理 > ' + title;
                document.getElementById('breadcrumb').innerHTML = breadcrumbText;
                
                // 更新iframe内容
                var iframe = document.getElementById('contentFrame');
                var fullUrl = url + (url.indexOf('?') > -1 ? '&embed=1' : '?embed=1');
                iframe.src = fullUrl;
                
                console.log('已返回BOM列表页面:', fullUrl);
            }
        });
    </script>
</body>
</html>
